<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">  
      #id1{
          width: 200px;
          height: 200px;
          background-color: aqua;
      }
      #id2{
          width: 200px;
          height: 200px;
          background-color: chartreuse;
      }
      #id3{
          width: 200px;
          height: 200px;
          background-color: darkgoldenrod;
      }
      #id4{
          width: 200px;
          height: 200px;
          background-color: darkseagreen;
      }
      #id5{
          width: 200px;
          height: 200px;
          background-color: deepskyblue;
      }
    </style>
</head>
<body>
    <!-- 
2.新制作一个页面，要求：
       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
       2.2 分别实现 id,类，标签三种方式查找以上元素 -->
    <!-- 3个DIV -->
    <div id="id1" class="styDiv1">
        第一个div出现
    </div>
    <div id="id2" class="styDivp" >
        <p> 中华民族</p>
        <p >中华民族</p>
        <p >中华民族</p>
        <p >中华民族</p>
        <p >中华民族 </p>           
    </div>
    <div id="id5" class="styDivh">
        <h4>龙的传人</h4>
    </div>
   <div>
       <img src="./img/u=30028801,2466945297&fm=15&fmt=auto.webp" alt="">
</div>
   <div>
       <ul>
           <li>西瓜</li>
           <li>西瓜</li>
           <li>西瓜</li>
           <li>西瓜</li>   
           <li>西瓜</li>
           <li>西瓜</li>
       </ul>
   </div>
</body>
   <script type="text/javascript">
    // 3个div，id的方式实现
    var DIV_1 = document.getElementById('id1')
    console.log(DIV_1)
    //标题， 类的方式实现
    var h_1 =document.getElementsByClassName('styDivh')
    console.log(h_1);
    //五个p标签，标签的方式实现
    var p_1 = document.getElementsByTagName('p')
    console.log(p_1)
    //图片，使用标签的方式实现 
    var img_1 =document.getElementsByTagName('img')
    console.log(img_1)
    //列表，使用标签的方式实现
    var li_1 = document.getElementsByTagName('li')
    console.log(li_1)
   </script>
</html>